<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>10擦除canvas</title>
		<style type="text/css">
			#firCan {
				display: block;
				border: 1px solid gold;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<canvas id="firCan" width="1000" height="500">
			<!--Canvas标签宽高默认值为 300*150-->
			当前浏览器版本过低 不支持 Canvas, 请升级!
			<!-- 
				IE 9+ 及其他浏览器都支持Canvas
				IE 9 以下, 可使用 Google 开发的 ExplorerCanvas 插件
			 -->
		</canvas>
	</body>
	<script type="text/javascript">
		// 1, 获取 canvas标签
		var firCan = document.getElementById("firCan");
		// 2, 获取 2D渲染上下文
		var context = firCan.getContext('2d');
		// 3, 绘制矩形
		context.fillStyle = "red";
		context.fillRect(20, 20, 960, 460);
		// 方式一: clearRect() 清除一块矩形区域
		context.clearRect(100, 100, 200, 200);
		context.fillRect(150, 150, 100, 100);
		// 方式二: 重置 canvas标签的宽和高
		firCan.width = 1000;
		firCan.height = 500;
		context.fillRect(150, 150, 100, 100);
		/*
		 * 注意: 通过方式一清除之后, 会保留原来的样式; 方式二清除之后, 样式也被重置.
		 */
		
		
	</script>
</html>
